import { useState, useEffect, useCallback } from 'react'
import Taro from '@tarojs/taro'

/**
 * 获取根据屏幕宽度缩放后的长度单位
 * @param value 要缩放的原始值
 * @returns 缩放后的长度单位（在React Native中为number，在其他平台中为px）
 */
export function rpx(value: number): string | number {
  const windowWidth = Taro.getSystemInfoSync().windowWidth
  const scaleFactor = windowWidth / 750

  // 判断当前环境是否为React Native
  if (Taro.getEnv() === Taro.ENV_TYPE.RN) {
    // 在React Native中单位为number
    return value * scaleFactor
  } else {
    // return `${value * scaleFactor}px`
    return `${value}rpx`
  }
}

/**
 * rpx的hooks，监听页面大小的变化
 * @returns 
 */
export function useRpx() {
  const [windowWidth, setWindowWidth] = useState(Taro.getSystemInfoSync().windowWidth)

  // 更新窗口宽度
  const updateWindowWidth = useCallback(() => {
    const newWidth = Taro.getSystemInfoSync().windowWidth
    setWindowWidth(newWidth)
  }, [])

  // 使用useEffect来监听窗口大小的变化
  useEffect(() => {
    // 监听窗口大小变化
    const handleResize = () => {
      updateWindowWidth()
    }

    // 监听页面大小的变化
    Taro.eventCenter.on('resize', handleResize)

    return () => {
      Taro.eventCenter.off('resize', handleResize)
    }
  }, [updateWindowWidth])

  const rpx = useCallback(
    value => {
      const scaleFactor = windowWidth / 750
      if (Taro.getEnv() === Taro.ENV_TYPE.RN) {
        return value * scaleFactor
      } else {
        return `${value * scaleFactor}px`
      }
    },
    [windowWidth]
  )

  return rpx
}

export const screenWidth = Taro.getSystemInfoSync().windowWidth

export const screenHeight =
  Taro.getSystemInfoSync().windowHeight - (Taro.getSystemInfoSync().statusBarHeight || 0)!
